import {loginReq} from "@/service/base.ts";
import {useAppDispatch} from "@/store/store.ts";
import {login} from "@/store/user";
import {SuccessCode} from "@/utils/request.ts";
import {useLocalStorageState} from "ahooks";
import {message, theme} from "antd";
import {useState} from "react";
import {Trans, useTranslation} from "react-i18next";
import {useNavigate} from "react-router-dom";
import bgImage from "./image@1x.png"
import styles from "./index.module.less"

const Login = () => {
    const [t] = useTranslation()
    const [, setToken] = useLocalStorageState("token")
    const [, setUserInfo] = useLocalStorageState("userInfo")
    const navigate = useNavigate();
    const dispatch = useAppDispatch()
    const [signing, setSigning] = useState(false)
    const [username, setUsername] = useState<string>('')
    const [password, setPassword] = useState<string>('')
    const {token: {colorPrimary}} = theme.useToken()

    const onLogin = () => {
        setSigning(true)
        loginReq({username, password}).then(res => {
            if (res.code == SuccessCode) {
                setToken(res.data.token)
                setUserInfo(res.data.user_info)
                dispatch(login(() => {
                    navigate("/admin/dashboard")
                }))

            } else {
                message.error(res.msg)
            }
        })
    }

    return (
        <div className={styles.Login}>
            <div className={styles.Left} style={{backgroundColor: colorPrimary}}>
                <div className={styles.Wrap} style={{backgroundImage: `url(${bgImage})`}}>
                    <p>
                        <Trans>page.login.welcome1</Trans><br/>
                        <Trans>page.login.welcome2</Trans>
                    </p>
                </div>
            </div>
            <div className={styles.Right}>
                <div className={styles.LoginForm}>
                    <div className={styles.Title}>
                        Admin Template
                    </div>

                    <div className={styles.InputGroup}>
                        <div className={styles.Title2}>
                            <Trans>page.login.login</Trans>
                        </div>
                        <input placeholder={t("page.login.username")} autoComplete='off' value={username}
                               className={styles.Input}
                               onChange={(event) => {
                                   setUsername(event.target.value)
                               }}/>
                        <input placeholder={t("page.login.password")} onKeyDown={(event) => {
                            if (event.key == "Enter") {
                                onLogin()
                            }
                        }} autoComplete='off' value={password}
                               type={"password"}
                               className={styles.Input}
                               onChange={(event) => {
                                   setPassword(event.target.value)
                               }}/>
                    </div>
                    <div className={styles.SubmitBtn} style={{backgroundColor: colorPrimary}} onClick={onLogin}>
                        {signing ? "Signing" : "Continue"}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Login;
